<template>
  <el-breadcrumb
    separator="/"
    class="mb-2"
    :class="{ 'mx-2': useLocale.isMob }"
    style="vertical-align: bottom"
  >
    <el-breadcrumb-item>
      <div class="flex align-center">
        <el-icon :size="18"><Setting /></el-icon>
        <span class="pl">顾客管理</span>
      </div>
    </el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/user' }">顾客列表</el-breadcrumb-item>
    <el-breadcrumb-item>客户资料</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="box-card" v-if="useLocale.isMob">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="ec2-form mt-1"
      status-icon
      label-width="auto"
      label-position="top"
    >
      <el-form-item label="用户名称" prop="fb_name">
        <el-input v-model="ruleForm.fb_name" disabled />
      </el-form-item>
      <el-form-item label="真实姓名/收件人" prop="truth_name">
        <el-input v-model="ruleForm.truth_name" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio-button label="男" :value="1" />
          <el-radio-button label="女" :value="2" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" />
      </el-form-item>
      <el-form-item label="联系地址" class="required-self">
        <el-input class="mb-1" type="textarea" v-model="region" @click="visible = true" />
        <nut-cascader
          title="地址选择"
          v-model:visible="visible"
          v-model="region"
          text-key="name"
          @change="handleChange"
          value-key="name"
          children-key="children"
          :options="regionArr"
        ></nut-cascader>
        <el-input
          class="mb-1"
          style="width: 100%"
          placeholder="邮编"
          v-model="ruleForm.region_code"
        />

        <el-input
          v-model="ruleForm.address"
          placeholder="详情地址"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-input
      v-model="ruleForm.birthday"
      style="width: 100%"
      placeholder="Pick a date"
      readonly
      :suffix-icon="Calendar"
      @click="birthVisable = true"
    />
    <nut-datepicker
      v-model="mobDate"
      type="date"
      readonly
      title="日期选择"
      v-model:visible="birthVisable"
      @confirm="confirm"
  ></nut-datepicker>
      </el-form-item>
      <el-form-item label-width="auto" style="margin-bottom: 0">
        <el-button size="large" type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button size="large" @click="back()"> 返回 </el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-card class="box-card" shadow="hover" v-else>
    <el-scrollbar class="scroll">
      <el-form
        ref="ruleFormRef"
        style="max-width: 750px"
        :model="ruleForm"
        :rules="rules"
        label-width="200"
        class="form mt-1"
        status-icon
      >
        <el-form-item label="用户名称" prop="fb_name">
          <el-input v-model="ruleForm.fb_name" disabled />
        </el-form-item>
        <el-form-item label="真实姓名/收件人" prop="truth_name">
          <el-input v-model="ruleForm.truth_name" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio-button label="男" :value="1" />
            <el-radio-button label="女" :value="2" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="ruleForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="联系地址" class="required-self">
          <div class="flex mb-1" style="width: 100%">
            <div style="width: 70%" class="mr-1">
              <el-cascader
                style="width: 100%"
                v-model="region"
                :options="regionArr"
                :props="props"
                @change="handleChange"
              />
            </div>
            <div style="width: 30%">
              <el-input
                style="width: 100%"
                placeholder="邮编"
                v-model="ruleForm.region_code"
              />
            </div>
          </div>
          <el-input
            v-model="ruleForm.address"
            placeholder="详情地址"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker v-model="ruleForm.birthday" type="date" style="width:100%;" />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <el-form-item label-width="220" style="margin-bottom: 0">
        <el-button size="large" type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button size="large" @click="back()"> 返回 </el-button>
      </el-form-item>
    </template>
  </el-card>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import {
  $getUserInfo,
  $updateUserInfo,
  $getUserRegion,
  $getCode,
} from "@api/user";
import { $searchMaterial } from "@api/common";
import { Search, Setting, Plus } from "@element-plus/icons-vue";
import { useLocaleStore } from "@/store/locales";
import router from "@/router/";
const useLocale = useLocaleStore();
const region = ref([]);
const regionArr = ref([]);
const ruleFormRef = ref();

const visible = ref(false);
const birthVisable = ref(false);
const mobDate=new Date();
const props = {
  expandTrigger: "hover" as const,
  value: "id",
  label: "name",
};
let fit = reactive({
  fullscreen: false,
});
if (useLocale.isMob) {
  fit.fullscreen = true;
} else {
  fit.fullscreen = false;
}
onMounted(() => {
  getFilter();
});

const ruleForm = reactive({
  fb_user_id: "",
  fb_name: "",
  truth_name: "",
  sex: "-1",
  phone: "",
  email: "",
  address: "",
  region_city: "",
  region_area: "",
  region_code: "",
  region_country: "",
  birthday: "",
});
const rules = reactive({
  fb_name: [
    {
      required: true,
    },
  ],
  truth_name: [
    {
      required: true,
      message: "Please Input",
      trigger: "change",
    },
  ],
  sex: [
    {
      required: true,
      message: "Please Select",
      trigger: "change",
    },
  ],
  phone: [
    {
      required: true,
      message: "Please Input",
      trigger: "change",
    },
  ],
  email: [
    {
      type: "email",
      message: "Please input correct email address",
      trigger: ["blur", "change"],
    },
  ],
});
const getFilter = async () => {
  const res = await $getUserRegion();
  console.log(res);
  regionArr.value = res.data.list;
  getInfo();
};
const getInfo = async () => {
  const res = await $getUserInfo();
  if (JSON.stringify(res.data) != "{}") {
    Object.keys(ruleForm).forEach((key) => {
      ruleForm[key] = res.data[key];      
    });
  }
};

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log("submit!");
      const res = await $updateUserInfo(ruleForm);
      if (res.code == 0) {
      } else {
      }
    }
  });
};
const back = () => {
  router.push("/user");
};
const handleChange = async (value) => {
  const res = await $getCode({ region_area_id: value[2] });
  ruleForm.region_code = res.data.region_code;
};
const confirm = ( { selectedValue, selectedOptions } )=>{
        //date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
        //console.log(date);
        console.log(selectedValue);
        console.log(selectedOptions);
        ruleForm.birthday = selectedValue[0]+ '-' + selectedValue[1]+ '-' + selectedValue[2];
        console.log(ruleForm);
      }
const refreshPage = () => {
  //location.reload();
  const currentRoute = router.currentRoute.value;
  console.log(currentRoute);
  router.replace(currentRoute);
  //router.replace({name: '404'});
};
</script>
<style>
.ec2-form {
  .el-form-item__content {
    line-height: 1;
  }
}
</style>
<style lang="scss" scoped>
.ec2-form {
  padding: 20px;
}
.box-card {
  display: inherit;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
}

.scroll {
  height: calc(100vh - 320px);
}
</style>
